<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复杂页面布局</title>
    <link rel="stylesheet" type="text/css" href="normallize.css">
    <style>
        .clearfix:before,
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }
        header {
            width: 100%;            
        }
        .wrap {
            width: 1180px;
            padding:  10px 60px 11px 45px;
            background-color: #2189BF;
            margin: 0 auto;
        }
        .main-content {
            min-width: 1285px;
        }
        .con-wrap {
            width: 1285px;
            margin: 0 auto;
        }
        .wrap p {
            float: left;
            margin: 0;
        }
        .wrap p img {
            display: block;
            width: 36px;
            height: 36px;
        }
        .wrap .hed-right {
            float: right;
        }
        .wrap .hed-right input {
            width: 273px;
            height: 28px;
            border: none;
            outline: none;
            border-radius: 28px;
            padding-left: 40px;
            background: url(task-9/zoomb.gif) no-repeat 20px center #fff;
            margin-right: 20px;
        }
        .wrap .hed-right a {
            font-size: 12px;
            font-family: "微软雅黑";
            text-decoration: none;
            color: #fff;
            padding-left: 20px;
            background: url(task-9/person_icon.gif) no-repeat left center;
        }
        .wrap .hed-right a:hover {
            color: #f00;
            text-decoration: none;
        }
        /* 侧边栏 */
        aside {
            background-color: #2A2E3D;
            height: 1213px;
            width: 261px;
            float: left;
        }
        aside .icon {
            padding-top: 25px;
            padding-left: 45px;
        }
        aside .icon span:first-child {
            display: inline-block;
            width: 47px;
            height: 47px;
            background-color: #B9BABD;
            border-radius: 100%;
            position: relative;
        }
        aside .icon span:first-child::before {
            content: '';
            display: block;
            width: 57px;
            height: 57px;
            border: 1px solid #B9BABD;
            border-radius: 100%;
            position: absolute;
            top: -6px;
            left: -6px;
        }
        aside .icon span:last-child {
            display: inline-block;
            font-family: "黑体";
            font-size: 16px;
            color: #F6F5F4;
            padding-left: 15px;
            vertical-align: top;
            padding-top: 16px;
        }
        aside .detail {
            padding-top: 18px;
            padding-left: 61px;
        }
        aside .detail .item {
            float: left;
            padding-right: 31px;
        }
        aside .detail .item + .item {
            padding-left: 31px;
            border-left: 1px solid #313545;
            padding-right: 0;
        }
        aside .detail .item h3 {
            font-size: 16px;
            font-weight: normal;
            font-family: "黑体";
            color: #6D8095;
            margin: 0;
        }
        aside .detail .item p {
            font-size: 12px;
            font-family: "宋体";
            color: #6D8095;
            margin: 0;
        }
        /* 文件夹目录 */
        .nav-list ul li.list-1.active {
            background-color: #383D4E;
        }
        .nav-list ul li {
            font-size: 12px;
            color: #6D8095;
            font-family: "黑体";
        }
        .nav-list ul li a {
            text-decoration: none;
            color: #6D8095;
        }
        #list1 {
            padding-left: 0;
            list-style: none;
        }
        .nav-list ul li.list-1.active a {
             color: #ECECEF;
        }
        #list1 li.list-1:nth-child(1)>a {
            padding-left: 25px;
            background: url(task-9/baobiao.gif) no-repeat left -1px;
        }
        #list1 li.list-1:nth-child(2)>a,
        #list1 li.list-1:nth-child(4)>a,
        #list1 li.list-1:nth-child(5)>a {
            padding-left: 25px;
            background: url(task-9/collect.gif) no-repeat left -1px;
        }
        #list1 li.list-1:nth-child(3)>a {
            padding-left: 25px;
            background: url(task-9/share.gif) no-repeat left -1px;
        }
        #list1 li.list-1:nth-child(6)>a {
            padding-left: 25px;
            background: url(task-9/account.gif) no-repeat left -1px;
        }
        #list1>li {
            line-height: 50px;
            padding-left: 45px;
        }
        #list2>li {
            list-style-image: url(task-9/r_arrow.gif);
            line-height: 26px;
        }
        #list2 li.active {
            list-style-image: url(task-9/b_arrow.gif);
            color: #ECECEF;
        }
        #list2 li.list-2.active a {
            color: #ECECEF;
        }
        #list2 li.list-2>a {
            color: #6D8095;
            padding-left: 12px;
            background: url(task-9/wjj.gif) no-repeat left center;
        }
        #list3 li {
            list-style-image: url(task-9/wendang.gif);
        }
        /* 右半边部分 */
        section {
            float: left;
            width: 1024px;
            height: 1213px;
            background: #EEEDED;
        }
        section .bread-nav {
            width: 100%;
            height: 30px;
            background-color: #fff;
            line-height: 30px;
            padding-left: 27px;
        }
        section .bread-nav span {
            font-size: 13px;
            color: #AAAAA9;
            font-family: "黑体";
        }
        section .bread-nav span.active {
            color: #A0BED9;
        }
        .search-div {
            width: 850px;
            height: 56px;
            background-color: #fff;
            margin: 20px auto 0px;
            padding: 15px 20px;
        }
        .search-1,
        .search-2,
        .search-3,
        .search-4 {
            float: left;
        }
        .search-1,
        .search-2,
        .search-3 {
            margin-right: 39px;
        }
        .search-1 label,
        .search-2 label,
        .search-3 label {
            font-size: 12px;
            font-family: "黑体";
            color: #AAAAA9;
        }
        .search-1 select {
            font-size: 12px;
            font-family: "黑体";
            width: 68px;
            height: 26px;
        }
        .search-2 {
            padding-right: 27px;
            background: url(task-9/huan.gif) no-repeat right center;
        }
        .search-2 label {
            display: block;
            margin-bottom: 5px;
        }
        .search-2 select {
            width: 121px;
            height: 26px;
            font-size: 12px;
            font-family: "黑体";
        }
        .search-3 {
            width: 296px;
            height: 56px;
        }
        .search-3 label:nth-child(1) input {
            width: 116px;
            height: 22px;
            margin: 0;
            padding: 0;
            margin-bottom: 5px;
        }
        .search-3 label:nth-child(4) select {
            width: 120px;
            height: 26px;
            margin-bottom: 5px;
        }
        .search-3 label:nth-child(2) select,
        .search-3 label:nth-child(3) select {
            width: 70px;
            height: 26px;
            
        }
        .search-4 button {
            width: 50px;
            height: 26px;
            line-height: 26px;
            font-size: 12px;
            font-family: "黑体";
            color: #FEFEFE;
            text-align: center;
            background: #388AC2;
            border: none;
            outline: none;
        }

        /* date部分 */
        .search-data {
            width: 890px;
            margin: 0 auto;
        }
        .search-data ul {
            list-style: none;
            padding-left: 0;
        }
        .search-data ul li {
            /*display: inline-block;*/
            float: left;
        }
        .search-data ul li + li {
            margin-left: 5px;
        }
        .search-data ul li a {
            text-decoration: none;
        }
        .search-data ul li.pre a,
        .search-data ul li.next a {
            display: inline-block;
            font-size: 18px;
            color: #AAAAA9;
            width: 30px;
            height: 65px;
            line-height: 65px;
            background: #fff;
            text-align: center;
        }
        .search-data ul li.list-date a {
            display: inline-block;
            width: 110px;
            height: 49px;
            background-color: #fff;
            border-top: 1px solid #CFD2D5;
            padding-top: 15px;
        }
        .search-data ul li.list-date.active a {
            border-top: 3px solid #388AC2;
            height: 47px;
        }
        .search-data ul li.list-date a span:first-child {
            display: block;
            font-size: 12px;
            font-family: "微软雅黑";
            color: #323232;
            text-align: center;
            margin-bottom: 5px;
        }
        .search-data ul li.list-date a span:last-child {
            display: block;
            font-size: 21px;
            font-family: "微软雅黑";
            color: #EB6400;
            text-align: center;
        }
        .search-data ul li.list-date a span:last-child i {
            font-style: normal;
            color: #AAAAA9;
            font-size: 17px;
            font-weight: bold;
        }
        .search-data ul li:last-child a {
            display: inline-block;
            width: 80px;
            height: 65px;
            font-size: 12px;
            font-family: "微软雅黑";
            color: #535353;
            line-height: 65px;
            padding-left: 50px;
            background: url(task-9/date.gif) no-repeat 10px center #fff;
        }
        /*月份总计*/
        .total {
            width: 890px;
            margin: 15px auto;
        }
        .total h3 {
            height: 19px;
            line-height: 10px;
            font-size: 12px;
            font-family: "微软雅黑";
            color: #323232;
            font-weight: normal;
            margin: 0;
        }
        .total ul {
            list-style: none;
            padding: 0;
            margin-top: 0;
        }
        .total ul li {
            float: left;
            width: 197px;
            height: 70px;
            background-color: #fff;
        }
        .total ul li + li {
            margin-left: 30px;
        }
        .total ul li:nth-child(1) {
            border-left: 3px solid #43B29E;
        }
        .total ul li:nth-child(2) {
            border-left: 3px solid #398BC2;
        }
        .total ul li:nth-child(3) {
            border-left: 3px solid #CF4A36;
        }
        .total ul li:nth-child(4) {
            border-left: 3px solid #E2CD47;
        }
        .total ul li:nth-child(1) .t-right {
            width: 61px;
            height: 47px;
            background: #43B29E;
        }
        .total ul li:nth-child(2) .t-right {
            width: 61px;
            height: 47px;
            background: #398BC2;
        }
        .total ul li:nth-child(3) .t-right {
            width: 61px;
            height: 47px;
            background: #CF4A36;
        }
        .total ul li:nth-child(4) .t-right {
            width: 61px;
            height: 47px;
            background: #E2CD47;
        }
        .total ul li .t-left,
        .total ul li .t-right {
            margin-top: 11px;
        }
        .total ul li .t-left {
            float: left;
            padding-left: 5px;
        }
        .total ul li .t-right {
            float: right;
            margin-right: 15px;
        }
        .total ul li .t-left p:first-child {
            font-size: 12px;
            font-family: "黑体";
            color: #323232;
            margin-top: 8px;
            margin-bottom: 12px;
        }
        .total ul li .t-left p:last-child {
            font-size: 10px;
            font-family: "黑体";
            color: #AAAAA9;
            margin: 0;
        }
        /* 项目 */
        .product {
            width: 890px;
            margin: 0 auto;
        }
        .product .pro-left {
            float: left;
            margin-right: 9px;
        }
        .product .pro-right {
            float: right;
        }
        .pro-top {
            width: 512px;
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            font-family: "黑体";
            color: #AAAAA9;
            padding-left: 16px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background-color: #F4F5F6;
            border: 1px solid #CFD2D5;
            border-bottom: 0;
            box-shadow: 0 0 1px #CFD2D5;
        }
        .product .pro-right .pro-top {
            width: 332px;
        }
        .pro-bottom {
            width: 510px;
            height: 316px; 
            border: 1px solid #CFD2D5;
            box-shadow: 0 0 1px #CFD2D5;
            background-color: #fff;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            padding-left: 18px;
        }
        .product .pro-right .pro-bottom {
            width: 330px;
        } 
        .pro-left ul {
            list-style: none;
            padding: 0;
            margin-bottom: 0;
        }
        .pro-left ul li {
            display: inline-block;
        }
        .product ul li a {
            display: inline-block;
            width: 84px;
            height: 28px;
            font-size: 12px;
            font-family: "微软雅黑";
            color: #535353;
            text-align: center;
            line-height: 28px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            background-color: #EDEDF0;
            cursor: pointer;
        }
        .product ul li a.active {
            height: 29px;
            border: 1px solid #D9DADA;
            border-bottom: none;
            background-color: #fff;
            margin-bottom: -1px;
        }
        .product .pro-bottom .pro-content {
            width: 451px;
            height: 224px;
            border: 1px solid #D9DADA;
            box-shadow: 0 0 1px #CFD2D5;
            border-top-right-radius: 5px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            padding-top: 26px;
            padding-left: 35px;
        }
        .product .pro-bottom .pro-content table td {
            width: 98px;
            height: 28px;
            font-size: 12px;
            color: #535353;
            font-family: "宋体";
            text-align: center;
            border: 1px solid #D9DADA;
            /*box-shadow: 0 0 1px #CFD2D5;*/
            text-align: center;
        }
        .product .pro-bottom .pro-content table td + td {
            /*border-top: 0;*/
            border-left: 0;
        }
        .product .pro-bottom .pro-content table td.active,
        .product .pro-bottom .pro-content table td:hover {
            background-color: #F4F5F6;
        }
        .product .pro-bottom .pro-content table tr:not(:first-child) td {
            border-top: 0;
        }
        .pro-right .pro-bottom p {
            font-size: 12px;
            font-family: "微软雅黑";
            color: #C2C2C1;
            height: 19px;
            line-height: 19px;
            margin-bottom: 0;
            padding-left: 13px;
        }
        .pro-right .pro-bottom p.desc {
            color: #535353;
            margin: 3px 0;
        }
        .pro-right .pro-bottom  .table {
            width: 280px;
            height: 45px;
            border-top: 1px solid #C2C2C1;
            border-bottom: 1px solid #C2C2C1;
        }
        .pro-right .pro-bottom  .table p {
            margin-top: 5px;
        }
        .pro-right .pro-bottom  .table p.desc {
            margin: 0 0 ;
        }
        .pro-right .pro-bottom .table .t-left,
        .pro-right .pro-bottom .table .t-right {
            float: left;
            height: 45px;
        }
        .pro-right .pro-bottom .table .t-left {
            width: 30%;
            border-right: 1px solid #C2C2C1;
        }
        .pro-right .pro-bottom .table .t-right {
            width: 69%;
        }
        .pro-right .pro-bottom textarea {
            height: 125px;
            width: 274px;
            resize: none;
            border: none;
            font-size: 12px;
            color: #535353;
            line-height: 19px;
            padding-left: 13px;
            outline: none;
        }
        .pro-right .pro-bottom .bot {
            width: 280px;
            border-top: 1px solid #C2C2C1;
            padding-top: 5px;
        }
        .pro-right .pro-bottom .bot input {
            vertical-align: text-bottom;
            margin-bottom: 2px;
            
        }
        .pro-right .pro-bottom .bot label {
            font-size: 12px;
            font-family: "微软雅黑";
            color: #C2C2C1;
            padding-left: 3px;
        }
        .pro-right .pro-bottom .bot button {
            font-size: 12px;
            text-align: center;
            color: #fff;
            width: 51px;
            height: 26px;
            background-color: #388AC1;
            border: none;
            outline: none;
            float: right;
            border-radius: 4px;
        }
        /* 日历和汽车品牌榜 */
        .brand {
            width: 890px;
            margin: 0 auto;
            margin-top: 10px;
        }
        .brand .br-left {
            float: left;
        }
        .brand .br-left .pro-top {
            width: 332px;
            height: 40px;
        }
        .brand .br-right {
            float: right;
        }
        .brand .br-right .pro-top {
            width: 512px;
            height: 40px;
        }
        .brand .br-bottom {
            width: 330px;
            height: 316px;
            border: 1px solid #CFD2D5;
            box-shadow: 0 0 1px #CFD2D5;
            background-color: #fff;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            padding-left: 18px;
        }
        .brand .br-bottom .sel {
            padding: 10px 0;
            width: 310px;
            border-bottom: 2px solid #A9CFEC;
        }
        #dateSel,
        #monSel,
        #signSel,
        .brand .br-bottom .sel a {
            height: 23px;
            font-size: 12px;
            font-family: "黑体";
            color: #535353;
            text-align: center;
        }
        #dateSel,
        #monSel,
        #signSel {
            margin-right: 5px;
        }
        #dateSel {
            width: 65px;
        }
        #monSel {
            width: 86px;
        }
        #signSel {
            width: 76px;
        }
        .brand .br-bottom .sel a {
            display: inline-block;
            width: 66px;
            height: 21px;
            text-decoration: none;
            border: 1px solid #CFD2D5;
            line-height: 21px;
        }
        .brand .br-bottom .weekly {
            padding-left: 0;
            list-style: none;
            width: 308px;
            border-bottom: 1px solid #C2C2C1;
            text-align: right;
            margin: 0;
            padding: 8px 0;
        }
        .brand .br-bottom .weekly li {
            /*display: inline-block;*/
            float: left;
            width: 39px;
            /*height: 23px;*/
            font-size: 12px;
            font-family: "黑体";
            color: #535353;
            text-align: center;
            margin-left: 1px;
            padding: 1px 2px;
        }
        /* 日期部分 */
        .brand .br-bottom .detail {
            list-style: none;
            padding-left: 0;
            margin: 5px 0 0;
        }
        .brand .br-bottom .detail li {
            box-sizing: border-box;
            float: left;
            width: 40px;
            height: 36px;
            padding-top: 5px;
            margin: 3px 2px;
            cursor: pointer;
        }
        .brand .br-bottom .detail li:first-child {
            margin-left: 180px;
        }
        .brand .br-bottom .detail li:hover,
        .brand .br-bottom .detail li.active { 
            padding-top: 4px;          
            border: 1px solid #F4C21D;
        }
        .brand .br-bottom .detail li p {
            margin: 0;
            text-align: center;
            font-size: 12px;
            font-family: "黑体";
        }
        .brand .br-bottom .detail li p.special {
            color: #D03238;
        }
        .brand .br-bottom .detail li:nth-child(7n + 2) p:first-child,
        .brand .br-bottom .detail li:nth-child(7n + 3) p:first-child {
            color: #D03238;
        }

        /* 汽车brand*/
        .brand .br-right .br-bottom {
            width: 528px;
            padding-left: 0;
        }
        .brand .br-right .br-bottom table {
            width: 450px;
            margin: 20px auto;

        }
        .brand .br-right .br-bottom table td,
        .brand .br-right .br-bottom table th {
            border: 1px solid #CFD2D5;
            text-align: center;
            padding: 4px 10px;
        }
        .brand .br-right .br-bottom table th {
            font-size: 14px;
            font-weight: normal;
        }
        .brand .br-right .br-bottom table td {
            font-size: 12px;
            color: #313545;
            padding-left: 15px;
            padding-top: 6px;
        }
        .brand .br-right .br-bottom table td + td,
        .brand .br-right .br-bottom table th + th {
            /*border-top: 0;*/
            border-left: 0;
        }
        .brand .br-right .br-bottom table tr.active,
        .brand .br-right .br-bottom table tr:not(:first-child):hover {
            background-color: #F4F5F6;
            cursor: pointer;
        }
        .brand .br-right .br-bottom table tr:not(:first-child) td {
            border-top: 0;
        }
        .progress-bar {
             margin-bottom: 3px;
             margin-left: 20px;
        }
        .progress-bar, .progress-bar b{
            display: inline-block;
            width: 165px;
            height: 3px;
            border-radius: 10px;
            background-color: #DCDCDC;
        } 
        .brand .br-right .progress-bar b {
            float: left;
            width: 30%;
            height: 3px;
        }
        .progress-bar b {
            background-color: #7FCBF0;
        }
        .brand .br-right .progress-bar.hot-1 b {
            background-color: #ED6E52;
        }
        .brand .br-right .progress-bar.hot-2 b {
            background-color: #EF8150;
        }
        .brand .br-right .progress-bar.hot-3 b {
            background-color: #F19E4F;
        }

    </style>
</head>
<body>
    <header>
        <div class="wrap clearfix">
            <p><img src="task-9/logo.gif" alt=""></p>
            <div class="hed-right">
                <input type="text" name="" value="">
                <a href="#">登录</a>
            </div>
        </div>
    </header>

    <div class="main-content">
        <div class="con-wrap clearfix">
        <aside>
            <div class="icon">
                <span></span>
                <span>ABC123</span>
            </div>
            <div class="detail clearfix">
                <div class="item">
                    <h3>110</h3>
                    <p>收藏</p>
                </div>
                <div class="item">
                    <h3>313</h3>
                    <p>粉丝</p>
                </div>
            </div>
            <div class="nav-list">
                <ul id="list1">
                    <li class="active list-1">
                            <a href="#">个人报表</a>
                            <ul id="list2">
                                <li class="list-2">
                                    <a href="#">文件一</a>
                                </li>
                                <li class="list-2 active">
                                    <a href="#">文件二</a>
                                        <ul id="list3">
                                            <li>
                                                <a href="#">文档1</a>
                                            </li>
                                            <li>
                                                <a href="#">文档1</a>
                                            </li>
                                        </ul>
                                </li>
                                <li class="list-2">
                                    <a href="#">文件三</a>
                                </li>
                            </ul>
                    </li>
                    <li class="list-1">
                        <a href="#">个人收藏</a>
                    </li>
                    <li class="list-1">
                        <a href="#">我的分享</a>
                    </li>
                    <li class="list-1">
                        <a href="#">图库</a>
                    </li>
                    <li class="list-1">
                        <a href="#">成长记录</a>
                    </li>
                    <li class="list-1">
                        <a href="#">账户信息</a>
                    </li>
                </ul>
            </div>
        </aside>
        <section>
            <div class="bread-nav">
                <span>C站&nbsp;&nbsp;/&nbsp;&nbsp;</span><span>个人报表&nbsp;&nbsp;/&nbsp;&nbsp;</span><span>文件一&nbsp;&nbsp;/&nbsp;&nbsp;</span><span class="active">文档一</span>
            </div>

            <div class="search-div">
                <div class="search-1">
                    <label for="">查询项&nbsp;&nbsp;
                        <select class="select">
                            <option value="第一项" selected>第一项</option>
                            <option value="第二项">第二项</option>
                            <option value="第三项">第三项</option>
                        </select>
                    </label>
                </div>
                <div class="search-2">
                    <label for="">买方&nbsp;&nbsp;
                        <select class="select">
                            <option value="第一项" selected>小A</option>
                            <option value="第二项">小B</option>
                            <option value="第三项">小C</option>
                        </select>
                    </label>
                    <label for="">卖方&nbsp;&nbsp;
                        <select>
                             <option value="第一项" selected>小A</option>
                            <option value="第二项">小B</option>
                            <option value="第三项">小C</option>
                        </select>
                    </label>
                </div>
                <div class="search-3">
                    <label>日期&nbsp;&nbsp;
                        <input type="text" value="2017-3-22">
                    </label>
                    <label>总耗时&nbsp;&nbsp;
                        <select>
                             <option value="第一项" selected>8天</option>
                            <option value="第二项">6天</option>
                            <option value="第三项">1天</option>
                        </select>
                    </label>
                    <label>人数&nbsp;&nbsp;
                        <select>
                             <option value="第一项" selected>8人</option>
                            <option value="第二项">6人</option>
                            <option value="第三项">1人</option>
                        </select>
                    </label>
                    <label>成交项&nbsp;&nbsp;
                        <select>
                            <option value="第一项" selected>8项</option>
                            <option value="第二项">6项</option>
                            <option value="第三项">1项</option>
                        </select>
                    </label>
                </div>
                <div class="search-4">
                    <button type="button">搜索</button>
                </div>
            </div>

            <div class="search-data clearfix">
                <ul>
                    <li class="pre">
                        <a href="#">&lt;</a>
                    </li>
                    <li class="list-date active">
                        <a href="#">
                            <span>10:00 am</span>
                            <span><i>￥</i>1200</span>
                        </a>
                    </li>
                    <li class="list-date">
                        <a href="#">
                            <span>10:00 am</span>
                            <span><i>￥</i>1200</span>
                        </a>
                    </li>
                    <li class="list-date">
                        <a href="#">
                            <span>10:00 am</span>
                            <span><i>￥</i>1200</span>
                        </a>
                    </li>
                    <li class="list-date">
                        <a href="#">
                            <span>10:00 am</span>
                            <span><i>￥</i>1200</span>
                        </a>
                    </li>
                    <li class="list-date">
                        <a href="#">
                            <span>10:00 am</span>
                            <span><i>￥</i>1200</span>
                        </a>
                    </li>
                    <li class="list-date">
                        <a href="#">
                            <span>10:00 am</span>
                            <span><i>￥</i>1200</span>
                        </a>
                    </li>
                    <li class="next">
                        <a href="#">&gt;</a>
                    </li>
                    <li>
                        <a href="#">
                            历史查询
                        </a>
                    </li>
                </ul>
            </div>

            <div class="total clearfix">
                <h3>2016年4月份统计</h3>
                <ul>
                    <li>
                        <div class="t-left">
                            <p>12235</p>
                            <p>成交量</p>
                        </div>
                        <div class="t-right"></div>
                    </li>
                    <li>
                        <div class="t-left">
                            <p>12235</p>
                            <p>成交量</p>
                        </div>
                        <div class="t-right"></div>
                    </li>
                    <li>
                        <div class="t-left">
                            <p>12235</p>
                            <p>成交量</p>
                        </div>
                        <div class="t-right"></div>
                    </li>
                    <li>
                        <div class="t-left">
                            <p>12235</p>
                            <p>成交量</p>
                        </div>
                        <div class="t-right"></div>
                    </li>
                </ul>
            </div>

            <div class="product clearfix">
                <div class="pro-left">
                    <div class="pro-top">第一组项目</div>
                    <div class="pro-bottom">
                        <ul id="product-li">
                            <li><a class="active">项目一</a></li>
                            <li><a>项目一</a></li>
                            <li><a>项目二</a></li>
                            <li><a>项目三</a></li>
                            <li><a>项目四</a></li>
                        </ul>
                        <div class="pro-content">
                            <table class="tb1" style="border-spacing: 0px">
                                <tr>
                                    <td class="active">购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                            </table>
                            <table class="tb1" style="border-spacing: 0px;display: none;">
                                <tr>
                                    <td class="active">购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                            </table>
                            <table class="tb1" style="border-spacing: 0px;display: none;">
                                <tr>
                                    <td class="active">购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                            </table>
                            <table class="tb1" style="border-spacing: 0px;display: none;">
                                <tr>
                                    <td class="active">购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                            </table>
                            <table class="tb1" style="border-spacing: 0px;display: none;">
                                <tr>
                                    <td class="active">购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料二</td>
                                    <td>购买材料三</td>
                                    <td>购买材料四</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="pro-right">
                    <div class="pro-top">第一组项目</div>
                    <div class="pro-bottom">
                        <p>标题</p>
                        <p class="desc">项目报表三</p>
                        <div class="table clearfix">
                            <div class="t-left">
                                <p>价格</p>
                                <p class="desc">￥158</p>
                            </div>
                            <div class="t-right">
                                <p>负责人</p>
                                <p class="desc">小A</p>
                            </div>
                        </div>
                        <p>详细描述</p>
                        <textarea rows="" cols="">该项目目前负责人是......</textarea>
                        <div class="bot clearfix">
                            <input type="checkbox" name="check" id="check" checked> <label for="check">遵守保密协议</label>
                            <button type="button">搜索</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 日期和汽车行业品牌榜 -->
            <div class="brand">
                <div class="br-left">
                    <div class="pro-top">日历</div>
                    <div class="br-bottom">
                        <div class="sel">
                            <select name="" id="dateSel">
                                <option value="" selected>2017年</option>
                                <option value="">2016年</option>
                                <option value="">2015年</option>
                            </select><select name="" id="monSel">
                                <option value="" selected>4月</option>
                                <option value="">3月</option>
                                <option value="">2月</option>
                            </select><select name="" id="signSel">
                                <option value="" selected>表注日期</option>
                                <option value="">表注日期</option>
                                <option value="">表注日期</option>
                            </select><a href="##">返回今天</a>
                        </div>
                        <ul class="weekly clearfix">
                            <li>一</li>
                            <li>二</li>
                            <li>三</li>
                            <li>四</li>
                            <li>五</li>
                            <li>六</li>
                            <li>日</li>
                        </ul>
                        <ul class="detail clearfix">
                            <li>
                                <p>1</p>
                                <p class="special">愚人节</p>
                            </li>
                            <li>
                                <p>2</p>
                                <p>廿五</p>
                            </li>
                            <li>
                                <p>3</p>
                                <p>廿六</p>
                            </li>
                            <li>
                                <p>4</p>
                                <p>廿七</p>
                            </li>
                            <li class="active">
                                <p>5</p>
                                <p class="special">清明</p>
                            </li>
                            <li>
                                <p>6</p>
                                <p>廿九</p>
                            </li>
                            <li>
                                <p>7</p>
                                <p>三月</p>
                            </li>
                            <li>
                                <p>8</p>
                                <p>初二</p>
                            </li>
                            <li>
                                <p>9</p>
                                <p>初三</p>
                            </li>
                            <li>
                                <p>10</p>
                                <p>初四</p>
                            </li>
                            <li>
                                <p>11</p>
                                <p>初五</p>
                            </li>
                            <li>
                                <p>12</p>
                                <p>初六</p>
                            </li>
                            <li>
                                <p>13</p>
                                <p>初七</p>
                            </li>
                            <li>
                                <p>14</p>
                                <p>初八</p>
                            </li>
                            <li>
                                <p>15</p>
                                <p>初九</p>
                            </li>
                            <li class="active">
                                <p>16</p>
                                <p>初十</p>
                            </li>
                            <li>
                                <p>17</p>
                                <p>十一</p>
                            </li>
                            <li>
                                <p>18</p>
                                <p>十二</p>
                            </li>
                            <li>
                                <p>19</p>
                                <p>十三</p>
                            </li>
                            <li>
                                <p>20</p>
                                <p>十四</p>
                            </li>
                            <li>
                                <p>21</p>
                                <p>十五</p>
                            </li>
                            <li>
                                <p>22</p>
                                <p>十六</p>
                            </li>
                            <li>
                                <p>23</p>
                                <p>十七</p>
                            </li>
                            <li>
                                <p>24</p>
                                <p>十八</p>
                            </li>
                            <li>
                                <p>25</p>
                                <p>十九</p>
                            </li>
                            <li>
                                <p>26</p>
                                <p>廿十</p>
                            </li>
                            <li>
                                <p>27</p>
                                <p>廿一</p>
                            </li>
                            <li>
                                <p>28</p>
                                <p>廿二</p>
                            </li>
                            <li class="active">
                                <p>29</p>
                                <p>廿三</p>
                            </li>
                            <li>
                                <p>30</p>
                                <p>廿四</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="br-right">
                    <div class="pro-top">汽车品牌榜</div>
                    <div class="br-bottom">
                        <table cellspacing="0" cellpadding="2">
                            <tr>
                                <th>排名</th>
                                <th>品牌</th>
                                <th>搜索指数</th>
                            </tr>
                            <tr class="active">
                                <td>1</td>
                                <td>大众</td>
                                <td>
                                    4578945646
                                    <span class="progress-bar hot-1"><b style="width: 79%"> </b></span> 
                                </td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>大众</td>
                                <td>
                                    46545645646
                                    <span class="progress-bar hot-2"><b style="width: 69%"> </b></span> 
                                </td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>大众</td>
                                <td>
                                    68997975486
                                    <span class="progress-bar hot-3"><b style="width: 60%"> </b></span> 
                                </td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>大众</td>
                                <td>
                                    4578945646
                                    <span class="progress-bar"><b style="width: 56%"> </b></span> 
                                </td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>大众</td>
                                <td>
                                    13454874
                                    <span class="progress-bar"><b style="width: 50%"> </b></span> 
                                </td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>大众</td>
                                <td>
                                    234346456
                                    <span class="progress-bar"><b style="width: 46%"> </b></span> 
                                </td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>大众</td>
                                <td>
                                    123446543
                                    <span class="progress-bar"><b> </b></span> 
                                </td>
                            </tr>
                            <tr>
                                <td>8</td>
                                <td>大众</td>
                                <td>
                                    1202421014
                                    <span class="progress-bar"><b> </b></span> 
                                </td>
                            </tr>
                            <tr>
                                <td>9</td>
                                <td>大众</td>
                                <td>
                                    1021315436
                                    <span class="progress-bar"><b> </b></span> 
                                </td>
                            </tr>
                            <tr>
                                <td>10</td>
                                <td>大众</td>
                                <td>
                                    4578945646
                                    <span class="progress-bar"><b> </b></span> 
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

        </section>
        </div>
    </div>
</body>
<script>
    window.onload = function() {
        var oul = document.getElementById("product-li");
        var oa = oul.getElementsByTagName("a");
        var tb1 = document.getElementsByClassName("tb1");
        for(var i = 0; i < oa.length; i++) {
            oa[i].index = i;
            oa[i].onclick = function () {
                for(var i = 0; i < oa.length; i++) {
                    oa[i].className = "";
                    tb1[i].style.display = "none";
                }
                // oa[this.index].className = "active";
                this.className = "active";
                var r = Math.ceil(Math.random()*255);
                var g = Math.ceil(Math.random()*255);
                var b = Math.ceil(Math.random()*255);
                var tds = tb1[this.index].getElementsByTagName("td");
                for(var i = 0; i < tds.length; i++) {
                    tds[i].style.backgroundColor = "rgb("+r+","+g+","+b+")";
                }
                tb1[this.index].style.display = "block";
            }
        }
    }
</script>
</html>